<template>
    <div class="warn-list">
        <el-card class="box-card">
            <div class="contain">
                <div style="background: rgb(247,239,166);height: 22vh;overflow: hidden">
                    <div style="margin-bottom: 50px;margin-left: 20px;margin-top: 20px">总告警</div>
                    <div class="num" style="margin-left: 20px">8973</div>
                </div>
                <div style="height: 22vh">
                    <div style="background: rgb(166,247,193); height: 11vh;overflow: hidden">
                        <span style="display:inline-block">故障告警</span>
                        <span class="num" style="position: relative;top:32px">4342</span>
                    </div>
                    <div style="background: rgb(225,166,247);height: 11vh;overflow: hidden">
                        <span style="display:inline-block;margin-bottom: 30px">翻墙告警</span>
                        <span class="num" style="position: relative;top:32px">4342</span>
                    </div>
                </div>
                <div>
                    <div style="background: rgb(223,247,166); height: 11vh;overflow: hidden">
                        <span style="display:inline-block">踩踏警告</span>
                        <span class="num" style="position: relative;top:32px">4342</span>
                    </div>
                    <div style="background: rgb(181,247,166);height: 11vh;overflow: hidden">
                        <span style="display:inline-block;margin-bottom: 30px">烟感告警</span>
                        <span class="num" style="position: relative;top:32px">4342</span>
                    </div>
                </div>
                <div style="background: rgb(223,247,166); height: 22vh;margin-left: 30px;overflow: hidden">
                    <div style="margin-top: 30px;margin-left: 30px">未处理告警</div>
                    <div class="num" style="text-align: end;margin-right: 50px">4243</div>
                </div>
            </div>
        </el-card>

        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="告警类型">
                <el-select v-model="value" placeholder="活动区域">
                    <el-option label="区域一" value="全部告警"></el-option>
                    <el-option label="区域二" value="生产告警"></el-option>
                    <el-option label="区域二" value="安防告警"></el-option>
                    <el-option label="区域二" value="故障告警"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="处理状态">
                <el-select v-model="value" placeholder="活动区域">
                    <el-option label="区域一" value="已处理"></el-option>
                    <el-option label="区域二" value="未处理"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择时间日期">
                <el-date-picker
                        v-model="value"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="">
                <el-input placeholder="输入关键字"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="num"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="warnequi"
                    label="告警设备"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="warntype"
                    label="告警类型">
            </el-table-column>
            <el-table-column
                    prop="warntime"
                    label="告警时间">
            </el-table-column>
            <el-table-column
                    prop="warncontent"
                    label="告警内容">
            </el-table-column>
            <el-table-column
                    label="监控联动">
                <template slot-scope="scope">
                    <el-button
                            @click="handleClick(scope.row)"
                            type="text" size="small"
                            class="icon-shexiangtou-xian iconfont">
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">处理</el-button>
                </template>
            </el-table-column>
        </el-table>


    </div>
</template>

<script>

    export default {
        name: "WarnList",
        data(){
            return{
                value: '',
                tableData: [{
                    num: 'sj2020207151503001',
                    warnequi: '厨房温室度传感器',
                    warntype: '故障告警',
                    warntime: '2020-08-17 18:16',
                    warncontent: '设备故障',
                }]
            }
        },
        methods:{
            handleClick(row){
                console.log(row)
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '../../../public/style.scss';
    .box-card{
        height: 30vh;
        color: $normalColor;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 50px;
    }
    .contain {
        display: grid;
        height: 200px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        /*justify-items: center;*/
        align-items: center;
        > div {
            margin-left: 1vw;
        }
        .num{
            font-size: 30px
        }
    }
    .iconfont{
        font-size: 20px;
    }
</style>